<template>
  <div>
      <div class="wrapper">
        <swiper ref="mySwiper" :options="swiperOptions" class="swiper-show">
          <swiper-slide v-for="(item,i) in topImages" :key="i">
                <img :src="item" />
            </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>
  </div>
</template>
<script>
import 'swiper/dist/css/swiper.css'////这里注意具体看使用的版本是否需要引入样式，以及具体位置。
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  name: "DetailSwiper", // 此处不能Swiper作为name，否则报错
  props:{
    topImages:{
       type:Array,
       default(){
         return []
       }
    }
  },
  data() {
    return {
      swiperOptions: {
         init:false,
         loop: true,
        // 显示分页
        pagination: {
          el: ".swiper-pagination",
          clickable: true //允许分页点击跳转
        },
        autoplay:{
　　　　delay: 2000,
             stopOnLastSlide: false,
             disableOnInteraction: false
　　 },
       observer:true,//修改swiper自己或子元素时，自动初始化swiper 
       observeParents:true,//修改swiper的父元素时，自动初始化swiper
      },
      flag:true
    };
  },
  created() {
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    }
  },
  updated() {
     console.log(this.topImages);
    if (this.topImages.length>1) {
      //console.log(this.swiper);
      this.swiper.init();
    }
  },
  components: {
      swiper,
      swiperSlide
  },
  methods:{
    // imagesLoad(){
    //   if(this.flag){
    //        this.$emit('Swiper')
    //        this.flag=false
    //   }
    // }
  }
}
</script>
<style lang="css" scoped>
.wrapper >>> .swiper-pagination-bullet-active{
    background-color: #fff;
}
.swiper-show{
  height:300px;
  overflow: hidden;
}
/* 图片100% */
.swiper-slide a{
  display: block;
}
.swiper-slide img {
    width: 100%;
}
</style>